<script setup>
import { ref, watch, defineEmits } from 'vue'
import { RouterView, useRoute, useRouter } from 'vue-router'
import { fetchGameProduct } from '@/api/game'
const emits = defineEmits(['comfirmPay'])
const router = useRouter()

// const props = defineProps({
//   productData: {
//     type: Array,
//     default: [], //
//   },
// })
const selectIndex = ref(0)
const selectItem = ref({})
// watch(
//   props.productData,
//   (obj) => {
//     if (obj.length > 0) {
//       console.log(obj, 'props.productData')
//       selectItem.value = obj[5]
//       selectIndex.value = 5
//     }
//   },
//   {
//     deep: true, // 开启深度监听
//     immediate: true,
//   }
// )

// 获取充值的商品列表
let productData = ref([])
const getfetchGameProduct = async () => {
  let data = await fetchGameProduct({})
  console.log(data, 'productData')
  productData.value = data

  selectItem.value = productData.value[5]
  selectIndex.value = 5
}
getfetchGameProduct()
const handleSelect = (index, item) => {
  selectIndex.value = index
  selectItem.value = item
}

const comfirmPay = () => {
  emits('comfirmPay', selectItem.value)
}
</script>
<template>
  <div class="recharge-box common-box-shadow" v-if="selectItem">
    <div class="tab-title">{{ $t('Rechargeamount') }}</div>
    <div class="recharge-box-btn">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in productData" :key="index">
          <el-button type="info" v-if="selectIndex != index" @click="handleSelect(index, item)">
            <div>{{ item.coins }}{{ item.currency }}</div>
            <!-- <div class="Gazin">加赠100</div> -->
          </el-button>

          <el-button @click="handleSelect(index)" type="primary" v-if="selectIndex == index"
            >{{ item.coins }}{{ item.currency }}
            <!-- <div class="Gazin">加赠100</div> -->
          </el-button></el-col
        >

        <!-- <el-col :span="8"> <el-button type="primary">1999usd</el-button></el-col> -->
      </el-row>
    </div>
    <div class="sum-box">
      <span>{{ $t('coinsAvailable') }}：</span
      ><span class="sum-box-text">{{ selectItem.coins ? selectItem.coins : 1999 }}</span>
    </div>
    <el-button type="primary" @click="comfirmPay()">{{ $t('affirm') }}</el-button>
  </div>
</template>

<style lang="scss" scoped>
.recharge-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  width: 760px;
  padding: 10px 40px 26px 40px;
  font: 12px / 1.5 'Microsoft Yahei', 'Arial';
  .el-button--info {
    background: #f5f5f5;
    border: none;
    color: #000000;
  }

  .el-button--primary {
    background: #fea204;
    border: none;
  }
  .sum-box-text {
    color: #fea204;
  }

  .el-button {
    width: 100%;
    height: 50px;
    font-size: 15px;
    border-radius: 12px;
    font-weight: 300;
  }
}

.tab-title {
  /* color: #f90; */
  font-weight: bold;
  margin: 10px 0 20px 0;
  position: relative;
  /* padding-left: 10px; */
  font-size: 17px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
}

.sum-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 20px 32px 20px;
  font-weight: bold;
  font-size: 16px;
}

.recharge-box-btn {
  .el-col {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
}
</style>
<style lang="scss">
.recharge-box .el-button > span {
  display: flex !important;
  flex-direction: column !important;
  font-size: 16px;
  .Gazin {
    margin-top: 4px;
    color: rgba(254, 0, 2, 1);
    font-size: 13px;
  }
}
</style>
